<template>
  <chart height="400px" v-if="option" :option="option"></chart>
</template>

<script>
export default {
  name: "RecentExamResult",
  props: ["recentExam"],
  data() {
    return {
      option: null
    };
  },
  created() {
    const examNames = this.recentExam.map(item => item.examname);
    const examScore = this.recentExam.map(item => {
      return item.totalscore || 0;
    });
    this.option = {
      title: {
        text: "近期正式考试成绩"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: examNames,
          axisLabel: {
            interval: 0
          }
        }
      ],
      dataZoom: [
        {
          type: "slider",
          show: true,
          xAxisIndex: [0],
          left: "9%",
          bottom: -5,
          start: 0,
          end: 30 //初始化滚动条
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "成绩",
          type: "line",
          stack: "总量",
          areaStyle: {},
          data: examScore,
          label: {
            normal: {
              show: true,
              position: "top"
            }
          }
        }
      ]
    };
  }
};
</script>

<style scoped></style>
